import { Button, Col, Select, Input, Pagination, Row, Table } from "antd";
import { Link } from "react-router-dom";
import { SearchOutlined,SettingOutlined} from "@ant-design/icons";
import { categoriesList } from "../../../config/tagList"
import styles from "./list.module.less"
import { reqProblemList } from "../../../api";
import { useEffect, useState } from "react";
const { Option } = Select;


export const List = () => {
    const [value, setValue] = useState("")

    //数据列表
    let [dataSource, setDataSource] = useState([{
        key: '1',
        title: "1.两数之和",
        state: true,
        answer: 1000,
        passingRate: "80%",
        problemLevel: '简单',
        occurrenceRate: "-----"
    }])

    //表单头
    const columns = [
        {
            title: '状态',
            dataIndex: 'state',
            render: (text, record, index) => (<span>{text ? "√" : "—"}</span>)    
        },
        {
            title: '题目',
            dataIndex: 'title',
            sorter: (a, b) => a.age - b.age,
            render: (text, record, index) => <Button type="link"><Link to={ `/bank/${record.key}`}>{text}</Link></Button>
        },
        {
            title: '题解',
            dataIndex: 'answer',
            sorter: (a, b) => a.age - b.age,
        },
        {
            title: '通过率',
            dataIndex: 'passingRate',
            sorter: (a, b) => a.age - b.age,
        },
        {
            title: '难度',
            dataIndex: 'problemLevel',
            sorter: (a, b) => a.age - b.age,
        },
        {
            title: '出现频率',
            dataIndex: 'occurrenceRate',

        },
    ];
    // 初始请求参数
    const initialValue = {
        "page": 1,
        "pageSize": 10,
        "level": null,
        "categoryId": null
    }
    //搜索回调函数
    const onSearch = async(value) => {

        let data = await reqOneProblem(value)
        console.log(data.data.data,"搜索_____");

    }
    //选择器 切换回调
    const handleChange = async(value)=> {
        console.log(`selected ${value}`);
    }
    // 排序回调
    const clickSort = (pagination, filters, sorter, extra)=> {
        console.log('params', pagination, filters, sorter, extra);
    }
    // 点击分页器切换页面回调
    const changePage = async(page, pageSize)=>{
        console.log("----------", page, pageSize);
        const props = { ...initialValue, page, pageSize }
        const result = await reqHandle(props)
        setDataSource(result)
    }

    // 点击分类， 获取相应分类信息
    const selectCategory = async(categoryId)=>{
        console.log(categoryId);
        const props = { ...initialValue, categoryId}
        const result = await reqHandle(props)
        setDataSource(result)
    }
    
    const levelArr = ["简单", "中等", "困难"]
    //请求结果处理
    const reqHandle = async(props)=>{
        const data = await reqProblemList(props)
        const result = data.data.data.map(item => {
            const passingRate = ((item.acNumber / item.submitNumber) * 100).toFixed(2) + "%"
            return {
                key: item.id,
                title: item.title,
                state: true,
                answer: item.acNumber,
                passingRate,
                problemLevel: levelArr[item.problemLevel - 1],
                occurrenceRate: "-----"
            }
        })

        return result
    }
    useEffect(async()=>{        
        const result = await reqHandle(initialValue)
        setDataSource(result)
    }, [])
    useEffect(()=>{

    }, [dataSource])
    return (
        <>
            <Row style={{padding:"16px", margin:"16px 0"}}>
                <Col>
                    <Button type="primary" shape="round" size={"large"} onClick={()=>selectCategory(1)}>
                        全部题目                        
                    </Button>
                </Col>
                {
                    categoriesList.map(item =>{
                        return (
                            <Col offset={1} key={item.categoryId}>
                                <Button type="primary" shape="round" size={"large"} onClick={() => selectCategory(item.categoryId)}>
                                    {item.titleCn}
                                </Button>
                            </Col>
                        )
                    })
                }
            </Row>
            <div>
                <Select defaultValue="题单" className={styles.selectContainer} bordered={false} onChange={handleChange}>
                    <Option value="lucy1">lucy</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="Yiminghe">yiminghe</Option>  
                </Select>
                <Select defaultValue="难度" className={styles.selectContainer} bordered={false} onChange={handleChange}>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Select defaultValue="状态" className={styles.selectContainer} bordered={false} onChange={handleChange}>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Select defaultValue="标签" className={styles.selectContainer} bordered={false} onChange={handleChange}>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Input placeholder="根据题目编号搜索" 
                    prefix={<SearchOutlined />}
                    value={value} 
                    onPressEnter={()=>onSearch(value)}
                    onChange={(e)=>{
                        setValue(e.target.value)
                    }}
                    bordered={false}
                    style={{ width: "226px",marginRight:"10px" }} 
                />
                <Button style={{ backgroundColor:"#F2F3F4"}} type="link" icon={<SettingOutlined />}></Button>
            </div>
            <Table 
                columns={columns} 
                dataSource={dataSource}
                onChange={clickSort}
                bordered={false} 
                pagination={false}  
            />
            <Pagination onChange={changePage} total={100} />
        </>
    )
}